<div class="container">
  <form #form="ngForm" (submit)="signin()" class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required email="true" [(ngModel)]="signinForm.email"
      #email="ngModel">

    <!--
        当 email 是有效的或者 email 是干净的没有被碰过的
        那么这个 div 就是隐藏状态
       -->
    <!-- <div
        [hidden]="email.valid || email.pristine"
        class="alert alert-danger">
        Email is required
      </div> -->
    <!--
        当 email 是无效的并且 email 是被输入过数据的或者 email 是被碰过的
       -->
    <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
      <div *ngIf="email.errors.required">
        Email is required.
      </div>
      <div *ngIf="email.errors.email">
        Invalid Email.
      </div>
    </div>
    <div *ngIf="email_err_msg" class="alert alert-danger">
      {{ email_err_msg }}
    </div>
    <!--
      Angular 表单双向绑定会为绑定的元素提供一些特殊的类名
     -->
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required minlength="6"
      maxlength="18" [(ngModel)]="signinForm.password" #password="ngModel">
    <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
      <div *ngIf="password.errors.required">
        Password is required.
      </div>
      <div *ngIf="password.errors.minlength">
        Password minlength 6.
      </div>
    </div>
    <div class="alert alert-danger" *ngIf="err_message">
      {{ err_message }}
    </div>
    <button
      class="btn btn-lg btn-primary btn-block"
      [disabled]="!form.form.valid"
      type="submit">Sign in</button>
  </form>
  <p class="info">
    <a routerLink="/signup">Already have an account? Login here.</a>
  </p>
</div>
